<template>
    <div class="btn" @click="viewNotice">查看公告</div>
    <div>
        <el-dialog v-model="dialogVisible" title="施工公告信息" width="45%" top="10vh" :before-close="closeNotice">
            <div class="container">
                <el-input v-model="searchNotice" placeholder="请输入需要查询的公告" @keyup.enter="search">
                    <template #append>
                        <div class="icon" @click="refreshNotice">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                        </div>
                    </template>
                </el-input>
                <div class="notice" v-for="item in currentNotice" :key="item.id">
                    <p><span>公告发布时间:</span>{{ item.time }}</p>
                    <p><span>公告发布内容:</span>{{ item.content }}</p>
                </div>
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { getNoticeHttp } from "../../../request/api"
import { Refresh } from '@element-plus/icons-vue'

const dialogVisible = ref(false)
//所有的公告信息
const allNotice = ref([])
//当前页面显示的公告
const currentNotice = ref([])
//分页器的设置
const total = ref(0)
const pageSize = ref(4)
const currentPage = ref(1)
const handleCurrentChange = (curPage) => {
    currentPage.value = curPage
    //判断是否在搜索中
    if (searchResult.value.length === 0) {
        currentNotice.value = getCurrentNotice(allNotice.value)
    } else {
        currentNotice.value = getCurrentNotice(searchResult.value)
    }
}

//查询公告
const searchNotice = ref('')
const searchResult = ref([])
const search = () => {
    searchResult.value = allNotice.value.filter(item => item.content.includes(searchNotice.value))
    //调整当前显示的公告
    currentPage.value = 1
    currentNotice.value = getCurrentNotice(searchResult.value)
}
//停止搜索 复原
const refreshNotice = () => {
    if (searchResult.value.length === 0) {
        searchNotice.value = ''
        return
    }
    currentPage.value = 1
    currentNotice.value = getCurrentNotice(allNotice.value)
    searchNotice.value = ''
    searchResult.value = []
}

//打开公告信息面板
const viewNotice = () => {
    dialogVisible.value = true
    getNoticeHttp().then(res => {
        allNotice.value = res.data.reverse()
        currentNotice.value = getCurrentNotice(allNotice.value)
    })
}
//关闭公告面板
const closeNotice = () => {
    searchNotice.value = ''
    searchResult.value = []
    currentPage.value = 1
    dialogVisible.value = false
}

//封装 获取currentNotice的值
const getCurrentNotice = (notice) => {
    total.value = notice.length
    return notice.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
} 
</script>

<style lang="scss" scoped>
.btn {
    cursor: pointer;
}

.container {
    display: flex;
    flex-direction: column;

    .el-input {
        margin-bottom: 10px;

        :deep(.el-input-group__append) {
            cursor: pointer;
            padding: 0;

            .icon {
                width: 100%;
                height: 100%;
                background-color: #e8e8e8;
                padding: 0 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &:hover {
                .el-icon {
                    transform: rotate(180deg);
                    transition: all 1s;
                }
            }

            .el-icon {
                color: #3f3f3f;
                font-size: 16px;
            }
        }

    }

    .notice {
        padding: 15px;
        border-radius: 5px;

        &:nth-child(2n) {
            background-color: #f8f8f8;
        }

        &:hover {
            background-color: #efefef;
        }

        p {
            font-size: 16px;

            &:first-child {
                margin-bottom: 5px;
            }

            span {
                font-weight: 900;
                color: #333;
                padding-right: 10px;
            }
        }
    }

    .el-pagination {
        align-self: center;
        margin-top: 20px;

        :deep(.btn-prev) {
            width: 15px;
            height: 27px;
        }

        :deep(.number) {
            width: 15px;
            height: 27px;
        }

        :deep(.btn-next) {
            width: 15px;
            height: 27px;
        }
    }
}

:deep(.el-dialog__header) {
    padding: 20px 20px;
    border-bottom: 1px solid #c7c7c7;
    margin-right: 0;
}

:deep(.el-dialog__body) {
    padding-top: 10px;
}
</style>